import React, { useState } from 'react';
import { Card, Col, Row, Table, Tabs } from 'antd';
import style from './style.module.less';
import { BidirectionalBar, Line, WordCloud } from '@ant-design/charts';
import { useRequest } from 'ahooks';
import {
  apiHomeChartData,
  apiHomeHotWord,
  apiHomeSellerCounter,
  apiHomeUserChartData,
} from '@/api/home.api';
import { ColumnsType } from 'antd/es/table';

export default () => {
  const { data } = useRequest(apiHomeChartData);
  const { data: userData } = useRequest(apiHomeUserChartData);
  const { data: hotWord } = useRequest(apiHomeHotWord);
  const { data: sellerCounter } = useRequest(apiHomeSellerCounter);
  const [page, setPage] = useState(1);

  const sellerColumns: ColumnsType<any> = [
    {
      title: '排名',
      dataIndex: 'index',
      render: (text, record, index) => `${index + 1 + (page - 1) * 5}`,
    },
    {
      title: '商品名',
      dataIndex: 'name',
    },
    {
      title: '销量',
      dataIndex: 'value',
      defaultSortOrder: 'descend',
      sorter: (a: any, b: any) => (a.value > b.value ? 1 : -1),
    },
  ];

  const columns: ColumnsType<any> = [
    {
      title: '排名',
      dataIndex: 'index',
      render: (text, record, index) => `${index + 1 + (page - 1) * 5}`,
    },
    {
      title: '关键字',
      dataIndex: 'name',
    },
    {
      title: '用户数',
      dataIndex: 'value',
      defaultSortOrder: 'descend',
      sorter: (a: any, b: any) => (a.value > b.value ? 1 : -1),
    },
  ];

  return (
    <>
      <Card>
        <Tabs>
          <Tabs.TabPane tab={'文章浏览量'} key={'article'}>
            <Line
              height={400}
              data={data?.data.items ?? []}
              xField={'month'}
              yField={'value'}
              tooltip={{
                fields: ['month', 'value'],
                formatter: data => {
                  return {
                    name: '浏览量',
                    value: data.value,
                  };
                },
              }}
              meta={{
                month: {
                  formatter(v, k) {
                    return `${v + 1}月`;
                  },
                },
                value: {
                  formatter(v, k) {
                    return `${v}点击`;
                  },
                },
              }}
            />
          </Tabs.TabPane>

          <Tabs.TabPane tab={'粉丝增长量'} key={'user'}>
            <Line
              height={400}
              data={userData?.data.items ?? []}
              xField={'month'}
              yField={'value'}
              // seriesField={'month'}
              // xAxis={{ type: 'month' }}
              tooltip={{
                fields: ['month', 'value'],
                formatter: data => {
                  return {
                    name: '新会员数',
                    value: data.value,
                  };
                },
              }}
              lineStyle={{
                stroke: '#ff0000',
              }}
              meta={{
                month: {
                  formatter(v, k) {
                    return `${v + 1}月`;
                  },
                },
                value: {
                  formatter(v, k) {
                    return `${v}`;
                  },
                },
              }}
            />
          </Tabs.TabPane>
        </Tabs>
      </Card>

      <Card title={'销量排行'} style={{ marginTop: 20 }}>
        <Row>
          <Col span={12}>
            <Table
              rowKey={'id'}
              columns={sellerColumns}
              dataSource={sellerCounter?.data?.items ?? []}
              pagination={{
                pageSize: 5,
                showSizeChanger: false,
                onChange: page => {
                  setPage(page);
                },
              }}
            />
          </Col>

          <Col span={12}>
            <div style={{ marginTop: 50 }}>
              <BidirectionalBar
                xField={'name'}
                xAxis={{ position: 'bottom' }}
                yField={['value', 'money']}
                interactions={[{ type: 'active-region' }]}
                data={sellerCounter?.data?.items ?? []}
                tooltip={{
                  shared: true,
                  showMarkers: false,
                }}
              />
            </div>
          </Col>
        </Row>
      </Card>

      <Card title={'热门搜索'} style={{ marginTop: 20 }}>
        <Row>
          <Col span={12}>
            <Table
              rowKey={'id'}
              columns={columns}
              dataSource={hotWord?.data?.items ?? []}
              pagination={{
                pageSize: 5,
                showSizeChanger: false,
                onChange: page => {
                  setPage(page);
                },
              }}
            />
          </Col>

          <Col span={12}>
            <div style={{ marginTop: 50 }}>
              <WordCloud
                height={260}
                wordField={'name'}
                weightField={'value'}
                colorField={'value'}
                data={hotWord?.data?.items ?? []}
              />
            </div>
          </Col>
        </Row>
      </Card>
    </>
  );
};
